package com.leil.project

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.outlined.CreateNewFolder
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Button
import androidx.compose.material3.DismissibleNavigationDrawer
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch
import org.jetbrains.compose.resources.painterResource
import todo.composeapp.generated.resources.Res
import todo.composeapp.generated.resources.taiyi


@Composable
fun MobileLayout() {

}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldExample() {
    var presses by remember { mutableIntStateOf(0) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Top app bar")
                }
            )
        },
//        bottomBar = {
//            BottomAppBar(
//                containerColor = MaterialTheme.colorScheme.primaryContainer,
//                contentColor = MaterialTheme.colorScheme.primary,
//            ) {
//                Text(
//                    modifier = Modifier
//                        .fillMaxWidth(),
//                    textAlign = TextAlign.Center,
//                    text = "Bottom app bar",
//                )
//            }
//        },
//        floatingActionButton = {
//            FloatingActionButton(onClick = { presses++ }) {
//                Icon(Icons.Default.Add, contentDescription = "Add")
//            }
//        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text =
                    """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button $presses times.
                """.trimIndent(),
            )
        }
    }
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldWithDrawer() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    // 使用 rememberCoroutineScope()：获取协程作用域来执行这些操作
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerContent = {
//            ModalDrawerSheet(
//                drawerShape = RoundedCornerShape(0.dp)
//            ) {
//                Text("菜单 A", modifier = Modifier.padding(16.dp))
//                Text("菜单 B", modifier = Modifier.padding(16.dp))
//            }
            Column(
                modifier = Modifier.fillMaxHeight()
                    .width(260.dp)
                    .background(MaterialTheme.colorScheme.surfaceContainer)
                    .padding(8.dp),
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                Column {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(horizontal = 8.dp)
                    ) {
                        Image(
                            painter = painterResource(Res.drawable.taiyi),
                            contentDescription = "Head",
                            modifier = Modifier.size(40.dp).clip(CircleShape)
                        )
                        Spacer(modifier = Modifier.width(10.dp))
                        Text(
                            "Leil's TO DO",
                            style = MaterialTheme.typography.titleSmall,
                            modifier = Modifier.align(Alignment.CenterVertically)
                        )
                    }
                    // Search
                    Spacer(modifier = Modifier.height(8.dp))
                    Row(modifier = Modifier.padding(horizontal = 8.dp)) {
                        var inputText by remember { mutableStateOf("") }
                        OutlinedTextField(
                            value = inputText,
                            onValueChange = { inputText = it },
                            placeholder = { Text("搜索", fontSize = 14.sp) },
                            modifier = Modifier.fillMaxWidth(),
                            trailingIcon = {
                                Row {
                                    if (inputText.isNotEmpty()) {
                                        Icon(
                                            Icons.Filled.Close,
                                            contentDescription = "Clear",
                                            modifier = Modifier.clickable { inputText = "" }
                                        )
                                        Spacer(modifier = Modifier.width(10.dp))
                                    }
                                    Icon(
                                        Icons.Filled.Search,
                                        contentDescription = "Search",
                                        modifier = Modifier.clickable { /* do something */ }
                                    )
                                }
                            }

                        )
                    }

                    Spacer(modifier = Modifier.height(8.dp))
                    NavigationItem.entries.forEach {
                        val interactionSource = remember { MutableInteractionSource() }
                        val isHovered by interactionSource.collectIsHoveredAsState()
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier.fillMaxWidth()
                                .clickable { }
                                .clip(RoundedCornerShape(5.dp))
//                                .hoverable(interactionSource)
//                                .background(if (isHovered) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceContainer)
                                .padding(horizontal = 8.dp, vertical = 5.dp),
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            Row(
                            ) {
                                Icon(it.icon, contentDescription = it.contentDescription)
                                Spacer(modifier = Modifier.width(10.dp))
                                Text(
                                    it.label,
                                    style = MaterialTheme.typography.titleSmall,
                                )
                            }
                            Box(
                                modifier = Modifier
                                    .size(24.dp)
                                    .background(
                                        MaterialTheme.colorScheme.primaryContainer,
                                        shape = CircleShape
                                    )
                                    .clip(CircleShape),
                                contentAlignment = Alignment.Center,
                            ) {
                                Text(
                                    "5",
                                    style = MaterialTheme.typography.bodySmall.copy(fontSize = 12.sp)
                                )
                            }

                        }
                    }
                }

                Box(modifier = Modifier.fillMaxWidth().weight(1f)) {
                    val groups = listOf<Group>(
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup()
                    )
                    GroupList(groups)
                }
                Column {
                    Row(
                        Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        IconButton(onClick = {}) {
                            Icon(
                                Icons.Default.Add,
                                contentDescription = "新建列表"
                            )
                        }
                        IconButton(onClick = {}) {
                            Icon(
                                Icons.Outlined.CreateNewFolder,
                                contentDescription = "新建分组"
                            )
                        }
                    }
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text("Top app bar")
                    },
                    navigationIcon = {
                        IconButton(onClick = {scope.launch { drawerState.open() }}) {
                            Icon(
                                Icons.Default.Menu,
                                contentDescription = "Open Drawer"
                            )
                        }
                    }
                )
            },
//        bottomBar = {
//            BottomAppBar(
//                containerColor = MaterialTheme.colorScheme.primaryContainer,
//                contentColor = MaterialTheme.colorScheme.primary,
//            ) {
//                Text(
//                    modifier = Modifier
//                        .fillMaxWidth(),
//                    textAlign = TextAlign.Center,
//                    text = "Bottom app bar",
//                )
//            }
//        },
//        floatingActionButton = {
//            FloatingActionButton(onClick = { presses++ }) {
//                Icon(Icons.Default.Add, contentDescription = "Add")
//            }
//        }
        ) { innerPadding ->
            Column(
                modifier = Modifier
                    .padding(innerPadding),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                Text(
                    modifier = Modifier.padding(8.dp),
                    text =
                        """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button times.
                """.trimIndent(),
                )

            }
        }
    }
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldWithDrawer1() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    // 使用 rememberCoroutineScope()：获取协程作用域来执行这些操作
    val scope = rememberCoroutineScope()

    DismissibleNavigationDrawer(
        drawerContent = {
//            ModalDrawerSheet(
//                drawerShape = RoundedCornerShape(0.dp)
//            ) {
//                Text("菜单 A", modifier = Modifier.padding(16.dp))
//                Text("菜单 B", modifier = Modifier.padding(16.dp))
//            }
            Column(
                modifier = Modifier.fillMaxHeight()
                    .width(260.dp)
                    .background(MaterialTheme.colorScheme.surfaceContainer)
                    .padding(8.dp),
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                Column {
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(horizontal = 8.dp)
                    ) {
                        Image(
                            painter = painterResource(Res.drawable.taiyi),
                            contentDescription = "Head",
                            modifier = Modifier.size(40.dp).clip(CircleShape)
                        )
                        Spacer(modifier = Modifier.width(10.dp))
                        Text(
                            "Leil's TO DO",
                            style = MaterialTheme.typography.titleSmall,
                            modifier = Modifier.align(Alignment.CenterVertically)
                        )
                    }
                    // Search
                    Spacer(modifier = Modifier.height(8.dp))
                    Row(modifier = Modifier.padding(horizontal = 8.dp)) {
                        var inputText by remember { mutableStateOf("") }
                        OutlinedTextField(
                            value = inputText,
                            onValueChange = { inputText = it },
                            placeholder = { Text("搜索", fontSize = 14.sp) },
                            modifier = Modifier.fillMaxWidth(),
                            trailingIcon = {
                                Row {
                                    if (inputText.isNotEmpty()) {
                                        Icon(
                                            Icons.Filled.Close,
                                            contentDescription = "Clear",
                                            modifier = Modifier.clickable { inputText = "" }
                                        )
                                        Spacer(modifier = Modifier.width(10.dp))
                                    }
                                    Icon(
                                        Icons.Filled.Search,
                                        contentDescription = "Search",
                                        modifier = Modifier.clickable { /* do something */ }
                                    )
                                }
                            }

                        )
                    }

                    Spacer(modifier = Modifier.height(8.dp))
                    NavigationItem.entries.forEach {
                        val interactionSource = remember { MutableInteractionSource() }
                        val isHovered by interactionSource.collectIsHoveredAsState()
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier.fillMaxWidth()
                                .clickable { }
                                .clip(RoundedCornerShape(5.dp))
//                                .hoverable(interactionSource)
//                                .background(if (isHovered) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceContainer)
                                .padding(horizontal = 8.dp, vertical = 5.dp),
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            Row(
                            ) {
                                Icon(it.icon, contentDescription = it.contentDescription)
                                Spacer(modifier = Modifier.width(10.dp))
                                Text(
                                    it.label,
                                    style = MaterialTheme.typography.titleSmall,
                                )
                            }
                            Box(
                                modifier = Modifier
                                    .size(24.dp)
                                    .background(
                                        MaterialTheme.colorScheme.primaryContainer,
                                        shape = CircleShape
                                    )
                                    .clip(CircleShape),
                                contentAlignment = Alignment.Center,
                            ) {
                                Text(
                                    "5",
                                    style = MaterialTheme.typography.bodySmall.copy(fontSize = 12.sp)
                                )
                            }

                        }
                    }
                }

                Box(modifier = Modifier.fillMaxWidth().weight(1f)) {
                    val groups = listOf<Group>(
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup(),
                        createGroup()
                    )
                    GroupList(groups)
                }
                Column {
                    Row(
                        Modifier.fillMaxWidth(),
                        horizontalArrangement = Arrangement.SpaceBetween,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        IconButton(onClick = {}) {
                            Icon(
                                Icons.Default.Add,
                                contentDescription = "新建列表"
                            )
                        }
                        IconButton(onClick = {}) {
                            Icon(
                                Icons.Outlined.CreateNewFolder,
                                contentDescription = "新建分组"
                            )
                        }
                    }
                }
            }
        },
        drawerState = drawerState
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text("Top app bar")
                    },
                    navigationIcon = {
                        IconButton(onClick = {scope.launch {if (drawerState.isClosed) drawerState.open() else drawerState.close()}}) {
                            Icon(
                                Icons.Default.Menu,
                                contentDescription = "Open Drawer"
                            )
                        }
                    }
                )
            },
//        bottomBar = {
//            BottomAppBar(
//                containerColor = MaterialTheme.colorScheme.primaryContainer,
//                contentColor = MaterialTheme.colorScheme.primary,
//            ) {
//                Text(
//                    modifier = Modifier
//                        .fillMaxWidth(),
//                    textAlign = TextAlign.Center,
//                    text = "Bottom app bar",
//                )
//            }
//        },
//        floatingActionButton = {
//            FloatingActionButton(onClick = { presses++ }) {
//                Icon(Icons.Default.Add, contentDescription = "Add")
//            }
//        }
        ) { innerPadding ->
            Column(
                modifier = Modifier
                    .padding(innerPadding),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                Text(
                    modifier = Modifier.padding(8.dp),
                    text =
                        """
                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.

                    It also contains some basic inner content, such as this text.

                    You have pressed the floating action button times.
                """.trimIndent(),
                )

            }
        }
    }
}
